<template>
  <div id="box">
    <div style="margin-left:15px ">
      <el-radio-group v-model="planType" @change="queryList()">
        <el-radio-button v-if="!(this.$store.getters.hospitalId == 76 || this.$store.getters.hospitalId == 201)" label="胸痛" />
        <el-radio-button label="卒中" />
      </el-radio-group>
    </div>
    <div class="fr mg-10">
      <el-button
        type="primary"
        @click="
          clearAll();
          modelData.dialogTitle = '新增知情同意';
          newOrModify = true;
        "
      >
        新增知情同意
      </el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="tempName" label="同意书名称" align="center" />
      <el-table-column prop="description" label="同意书描述及来源" align="center" />
      <el-table-column prop="greentype" label="疾病类型" align="center" />
      <el-table-column prop="type" label="同意书类型" align="center" width="100">
        <template slot-scope="scope">
          {{ typeList[scope.row.type - 1] }}
        </template>
      </el-table-column>
      <el-table-column prop="type" label="状态" align="center" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1" class="statusY">使用</span>
          <span v-else class="statusN">禁用</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="delLine(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block textRight">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        :hide-on-single-page="!true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 增改模板 -->
    <!-- <span class="visibilityHide" :class="{ visiShow: visibilityHide, visibilityHide: !visibilityHide }"> -->
    <el-dialog :title="modelData.dialogTitle" :visible.sync="newOrModify" custom-class="dialogStyle" class="dialogStyle-body" top="15px" :close-on-click-modal="false">
      <div class="box-card" shadow="hover" style="margin: 15px;">
        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple-dark" /></el-col>
        </el-row>
        <el-form label-position="right" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="同意书名称" required><el-input v-model.trim="modelData.tempName" /></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="疾病类型" required>
                <el-select v-model="modelData.disease" placeholder="请选择" @change="modelData.type = ''">
                  <el-option label="胸痛" value="胸痛" />
                  <el-option label="卒中" value="卒中" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="同意书类型" required>
                <el-select v-model="modelData.type" placeholder="请选择">
                  <el-option label="介入" value="1" />
                  <el-option label="溶栓" value="2" />
                  <el-option label="保守" value="3" />
                  <el-option label="放弃" value="4" />
                  <el-option label="转院" value="5" />
                  <el-option label="出院" value="6" />
                  <el-option v-if="modelData.disease == '卒中'" label="脑出血" value="7" />
                  <el-option v-if="modelData.disease == '卒中'" label="AVM" value="8" />
                  <el-option v-if="modelData.disease == '卒中'" label="烟雾病" value="9" />
                  <el-option v-if="modelData.disease == '卒中'" label="介入栓塞" value="10" />
                  <el-option v-if="modelData.disease == '卒中'" label="夹闭" value="11" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="同意书状态" required>
                <el-select v-model="modelData.status" placeholder="请选择">
                  <el-option label="禁用" value="0" />
                  <el-option label="使用" value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label=" 同意书描述"><el-input v-model="modelData.description" /></el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <div id="example">
          <div><tinymce-editor v-model="modelData.tempContent" :init="init" /></div>
        </div>
        <el-button @click="newOrModify = false">取 消</el-button>
        <el-button type="primary" @click="toSave()">保 存</el-button>
      </span>
    </el-dialog>
    <!-- </span> -->
  </div>
</template>

<script>
import { selectInformedConsentTemp, saveInformedConsentTemp, deleteInformedConsentTemp } from '@/api/back-management/informed_consent'
// import tinymce from '@/components/Tinymce'
import Editor from '@tinymce/tinymce-vue'
export default {
  components: {
    // Tinymce
    'tinymce-editor': Editor
    // Editor
  },
  data() {
    return {
      tableData: [],
      currentPage: 1,
      tableTotal: 0,
      pageNum: '1', // 当前页
      pageSize: '10', // 每页的数量
      // newOrModify: true,
      newOrModify: false,
      modelData: {
        id: '', // id
        tempName: '', // 同意书名称
        description: '', // 同意书描述
        tempContent: '', // 同意书内容(带格式)
        dialogTitle: '', // 模板标题
        disease: '', // 疾病类型（胸痛卒中）
        type: '', // 类型
        status: '0' // 状态
      },
      planType: (this.$store.getters.hospitalId == '76' || this.$store.getters.hospitalId == '201') ? '卒中' : '胸痛', // 方案类型-胸痛/卒中
      visibilityHide: false,
      typeList: ['介入', '溶栓', '保守', '放弃', '转院', '出院', '脑出血', 'AVM', '烟雾病', '介入栓塞', '夹闭'],
      // setting: {
      //   // language_url: "/lib/js/zh_CN.js",
      //   language: 'zh_CN',
      //   height: 430,
      //   // plugins:"link lists image code table colorpicker textcolor wordcount contextmenu",
      //   // toolbar:"bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify|bullist numlist |outdent indent blockquote | undo redo | link unlink image code | removeformat",
      //   toolbar: 'formatselect fontsizeselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify |  bullist numlist outdent indent | undo redo |removeformat subscript superscript' // 字符串方式
      //   // branding: false,
      //   // images_upload_handler:(blobInfo, success,failure)=> {
      //   //   success('data:image/jpeg;base64,' + blobInfo.base64())
      //   // }
      // },
      tinyLoad: false,
      init: {
        menubar: false, // 禁用菜单栏
        branding: false, // 隐藏右下角技术支持
        elementpath: false, // 隐藏底栏的元素路径
        toolbar:
          'formatselect fontsizeselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify |  bullist numlist outdent indent | undo redo |removeformat subscript superscript', // 字符串方式
        // toolbar_drawer: 'sliding',
        // quickbars_selection_toolbar: 'removeformat | bold italic underline strikethrough | fontsizeselect forecolor backcolor',
        // plugins: 'link image media table lists fullscreen quickbars',
        language: 'zh_CN', // 本地化设置
        height: 350
      }
    }
  },
  mounted() {
    // this.tinymceBind()
    // this.newOrModify = false
    // this.visibilityHide = true
    this.queryList()
  },
  methods: {
    // go() {
    //   this.tinymceBind()
    // },
    toSave() {
      if (this.modelData.tempName === '') {
        this.$message({
          message: '同意书名称不能为空',
          type: 'warning'
        })
        return false
      } else if (this.modelData.disease === '' || !this.modelData.disease) {
        this.$message({
          message: '疾病类型不能为空',
          type: 'warning'
        })
        return false
      } else if (this.modelData.type === '' || !this.modelData.type) {
        this.$message({
          message: '同意书类型不能为空',
          type: 'warning'
        })
        return false
      }
      // this.modelData.tempContent = tinymce.get('mytextarea').getContent() // 获取值
      this.saveData()
    },
    saveData() {
      // let template = '<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body>' + this.modelData.tempContent + '</body></html>'
      const data = {
        userId: this.$store.getters.userId,
        hospitalId: this.$store.getters.hospitalId,
        tempName: this.modelData.tempName,
        description: this.modelData.description,
        tempContent: this.modelData.tempContent,
        greentype: this.modelData.disease,
        type: this.modelData.type,
        status: this.modelData.status
      }
      let type = ''
      if (this.modelData.id) {
        data.id = this.modelData.id
        type = '修改'
      } else {
        type = '保存'
      }

      saveInformedConsentTemp(data).then(res => {
        if (res.code === 9999) {
          this.$message({
            type: 'error',
            message: type + '失败!'
          })
        } else {
          this.queryList()
          this.$message({
            type: 'success',
            message: type + '成功!'
          })
          this.clearAll()
        }
      })
    },
    clearAll() {
      // 清空模板
      this.modelData.id = ''
      this.modelData.tempName = ''
      this.modelData.description = ''
      this.modelData.tempContent = ''
      this.modelData.dialogTitle = ''
      this.modelData.disease = ''
      this.modelData.type = ''
      this.modelData.status = '0'
      this.newOrModify = false
    },
    handleClick(row) {
      // 回显
      this.clearAll()
      this.modelData.tempName = row.tempName
      this.modelData.description = row.description
      this.modelData.tempContent = row.tempContent
      this.modelData.dialogTitle = '修改知情同意'
      this.modelData.id = row.id
      this.modelData.type = row.type
      this.modelData.disease = row.greentype
      this.modelData.status = (row.status || 0).toString()
      this.newOrModify = true
      // console.log(row);
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.queryList()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.queryList()
      console.log(`当前页: ${val}`)
    },
    // 查询菜单
    queryList() {
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        greentype: this.planType,
        apiToken: this.$store.getters.apiToken
      }
      selectInformedConsentTemp(data).then(res => {
        this.tableData = res.data.list
        this.tableTotal = res.data.total
      })
    },
    delLine(id) {
      this.$confirm('此操作将永久删除该同意书, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const data = {
            id: id
          }
          deleteInformedConsentTemp(data).then(res => {
            this.queryList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
        })
        .catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        })
    }
  }
}
</script>

<style scoped>
.textRight {
  text-align: right;
}

.dialogStyle >>> .el-dialog__body {
  text-align: center;
  min-width: 700px;
  min-height: 400px;
  padding-bottom: 0;
}
#example {
  margin-bottom: 30px;
}
.dialogStyle-body >>> .el-dialog__body {
  padding-bottom: 0;
}
.visiShow {
  visibility: visible !important;
  z-index: 3000 !important;
}
.visibilityHide {
  visibility: hidden;
  z-index: 0;
}
.statusY {
  color: lime;
}
.statusN {
  color: #ff7676;
}
</style>
